<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!--   绑定事件累加 -- 有参数     -->
        <button @click="fn">按钮</button>
        <br/>
        <button @click="fn1($event)">按钮1</button>
        <br/>
        <button @click="fn3($event,100)">按钮2</button>
        <hr/>

        <!--   绑定事件累加 -- 无参数     -->
        <button @click="increment">累加</button>
        <!--   绑定事件累加 -- 有参数     -->
        <button @click="incrementN(100)">累加n</button>
        <h3>{{count}}</h3>
        <hr/>

        <!--   绑定事件累加 --  直接在插值语法中写表达式    -->
        <button @click="count++">累加</button>
        <button @click="count+=10">累加n</button>
        <h1>{{count}}</h1>
        <hr/>

        <input type="text" @input="changeMsg"/>
        <input type="text" @input="msg=$event.target.value"/>
        <p>{{msg}}</p>
        <hr/>
        <!--
        .prevent修饰符:
          阻止当前事件的默认行为
        .once修饰符:
          当前事件只能触发一次
        -->
        <button @contextmenu.prevent.once="contextMenu">右键我</button>
        <!--
        .capture修饰符:
          控制当前事件在捕获阶段触发(如果不写,默认都是在冒泡阶段触发)
        .stop修饰符:
          阻止当前事件的传播
          如果要阻止捕获,在最外层元素上书写
          如果要阻止冒泡,在最内层元素上书写
       -->
        <div @click="outerClick">
            outer
            <div @click.capture="innerClick">
                inner
                <div @click.stop="contentClick">content</div>
            </div>
        </div>
        <br/>
        <!--
        .self修饰符:
          控制只有在当前绑定事件的元素上发生事件,才能触发事件
       -->
        <div @click.self="outerClick">
            outer
            <div>
                inner
                <div>
                    content
                </div>
            </div>
        </div>
        <br/>
        <!--
        按键别名修饰符
          .enter(配合键盘事件使用):当输入回车的时候执行回调函数
       -->
        <input type="text" @keyup.enter="publish"/>
    </div>
    <script>
        Vue.config.productionTip = false

        const vm = new Vue({
            el:'#app',
            data(){
                return{
                    count:0,
                    msg:''
                }
            },
            methods:{
                fn(){
                    alert('活动已下线')
                },
                fn1(e){
                    console.log(e,'111')
                },
                fn2(e){
                    console.log(e,'222')
                },
                fn3(e, a){
                    console.log(e,a, '333')
                },
                increment() {
                    this.count++
                },
                incrementN(n){
                    this.count+= n
                },
                changeMsg(e){
                    this.msg = e.target.value
                },
                contextMenu(){
                    console.log('右键触发')
                },
                outerClick() {
                    console.log('outer')
                },
                innerClick() {
                    console.log('inner')
                },
                contentClick(){
                    console.log('content')
                },
                publish(e){
                    console.log(e.target.value)
                }
            }
        })
    </script>
</body>
</html>